<template>
  <div>
    <el-dialog width="35%" :title="dialogTitle" @close="closeDialog" :visible.sync="dialogFormVisible" :destroy-on-close="true" :append-to-body="true" :close-on-click-modal="false">
      <el-form :model="videoForm" :rules="videoRules" ref="videoForm">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="videoForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth" prop="des">
          <el-input v-model="videoForm.des" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面" :label-width="formLabelWidth" prop="coverImg">
          <UploadImg ref="uploadImg" :file-size-limit-m="5" @getUploadUrl="getUploadCoverImgUrl"></UploadImg>
        </el-form-item>
        <el-form-item label="视频" :label-width="formLabelWidth" prop="videoUrl">
          <upload-video ref="uploadVideo" :file-size-limit-m="2048"  @getUploadUrl="getUploadUrl"/>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="videoForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addOrEditVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from "element-ui";
  import {getDictDataByType} from "@/api/dict-data";
  import {addVideo, editVideo, getVideos} from "@/api/video";
  import UploadVideo from "@/components/UploadVideo"
  import UploadImg from "@/components/UploadImg.vue";
  export default {
    name: "VideoDialog",
    components: {UploadImg, UploadVideo },
    data() {
      return {
        formLabelWidth: '120px',
        videoRules: {
            title: [
              { required: true, message: '请输入标题', trigger: 'blur' }
            ],
            des: [
              { required: true, message: '请输入介绍', trigger: 'blur' }
            ],
            videoUrl: [
              { required: true, message: '请上传视频', trigger: 'blur' }
            ],
      }
      }
    },
    computed: {
      dialogFormVisible: {
        get() {
          return this.$store.state.video.dialogFormVisible;
        },
        set(value) {
          this.$store.state.video.dialogFormVisible = value;
        }
      },
      dialogTitle: {
        get() {
          return this.$store.state.video.dialogTitle;
        },
        set(value) {
          this.$store.state.video.dialogTitle = value;
        }

      },
      videoForm: {
        get() {
          if (this.$store.state.video.videoForm.videoUrl) {
            console.log("执行了", this.$store.state.video.videoForm.videoUrl)
            // eslint-disable-next-line vue/no-async-in-computed-properties
            this.$nextTick(() => {
              this.$refs.uploadVideo.setReviewUrl(this.$store.state.video.videoForm.videoUrl)
            })
          }
          if (this.$store.state.video.videoForm.coverImg) {
            console.log("执行了", this.$store.state.video.videoForm)
            // eslint-disable-next-line vue/no-async-in-computed-properties
            this.$nextTick(() => {
              this.$refs.uploadImg.setReviewUrl(this.$store.state.video.videoForm.coverImg)
            })
          }
          return this.$store.state.video.videoForm;
        },
        set(value) {
          this.$store.state.video.videoForm = value;
        }
      }
    },
    mounted() {
    },
    methods: {
      getUploadUrl(url) {
        this.videoForm.videoUrl = url
      },
      getUploadCoverImgUrl(url) {
        this.videoForm.coverImg = url
      },
      getDictData(value) {
        let params = {
          keyword: value,
          dictTypeId: value,
          current: 1,
          size: 200
        }
        getDictDataByType(params).then(res => {
          this.dictTypeList = res.data.data
        })
      },
      refreshData() {
        var params = {
          "current": this.$store.state.video.currentPage,
          "size": this.$store.state.video.pageSize
        };
        // 刷新
        getVideos(params).then((res) => {
          this.$store.state.video.tableData = res.data.data;
          this.$store.state.video.total = res.data.total;
          this.clearForm();
        })
      },
      clearForm() {
        Object.keys(this.videoForm).forEach((key) => {
          this.videoForm[key] = null;
        })
      },
      closeDialog() {
        this.$store.state.video.dialogFormVisible = false;
        this.clearForm();
      },
      addOrEditVideo() {
        this.$refs["videoForm"].validate((valid) => {
          if (valid) {
            if (this.dialogTitle === "添加视频") {
              addVideo(this.videoForm).then((res) => {
                Message.success(res.data.msg);
                this.dialogFormVisible = false;
                this.refreshData();
              })
            } else {
              editVideo(this.videoForm).then((res) => {
                Message.success(res.data.msg);
                this.dialogFormVisible = false;
                this.refreshData();
              })
            }
        } else {
          console.log('error submit!!');
          return false;
        }
        });
      }
    }
  }
</script>

<style scoped>

</style>
